<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        function $(id) {
            return document.getElementById(id);
        }

        function changeCode() {
            $("codeImg").src="/checkCode?"+Math.random();
        }

        function land() {
            axios.get("/user/login",{
                params:{
                    userName:$("userName").value,
                    pwd:$("pwd").value,
                    code:$("code").value
                }
            }).then(resp =>{
                if (resp.data == "errorCode"){
                    $("errorDiv").innerHTML = "验证码错误";
                }
                else if (resp.data == "ok"){
                    location.href = "/html/index.html";
                }
                else {
                    $("errorDiv").innerHTML = "登录失败";
                }
            })

        }

    </script>
</head>
<body>

    <div id="errorDiv" style="color: red"></div>
    <input type="text" id="userName"><br>
    <input type="password" id="pwd"><br>
<!--    /checkCode 图片来源于服务器 -->
    <img src="/checkCode" id="codeImg" />
    <a href="javascript:changeCode()">看不清楚，换一张</a><br>
    请输入验证码： <input type="text" id="code"><br>
    <input type="button" value="登录" onclick="land()">
</body>
</html>